<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <title>Pikaday</title>
    <meta name="author" content="David Bushell">
    <link rel="stylesheet" href="pikaday.css">
    <style>
    html { margin: 0; padding: 0; }
    body { font-size: 100%; margin: 0; padding: 1.75em; font-family: 'Helvetica Neue', Arial, sans-serif; }

    h1 { font-size: 1.75em; margin: 0 0 0.6em 0; }
    h2 { font-size: 1.25em; margin: 0 0 0.6em 0; }

    a { color: #2996cc; }
    a:hover { text-decoration: none; }

    p { line-height: 1.5em; }
    .small { color: #666; font-size: 0.875em; }
    .large { font-size: 1.25em; }

    label {
        font-weight: bold;
    }
    input[type="text"] {
        margin: 0.5em 0 3em 0;
        padding: 0.5em;
    }
    </style>
</head>

    <h1>Pikaday</h1>

    <label for="datepicker">Date:</label>
    <br>
    <input type="text" id="datepicker">
    <input type="text" id="datepicker1">

    <script src="pikaday.js"></script>
    <script>

    var picker = new Pikaday(
    {
        field: document.getElementById('datepicker'),
        firstDay: 1,
        minDate: new Date('2000-01-01'),
        maxDate: new Date('2020-12-31'),
        yearRange: [2000,2020]
    });
    
    var picker = new Pikaday(
    {
        field: document.getElementById('datepicker1'),
        firstDay: 1,
        minDate: new Date('2000-01-01'),
        maxDate: new Date('2020-12-31'),
        yearRange: [2000,2020]
    });


    </script>
</body>
</html>
